<template>
  <!-- 增删改查 dialog -->
  <div>
    <el-dialog
      :title="info.title"
      :visible.sync="info.show"
      width="1000px"
      :close-on-click-modal="false"
      v-el-drag-dialog
      v-dialogDrag
      @open="dialogShow"
      @close="dialogClose"
      :destroy-on-close="true"
    >
      <div>
        <!-- 合同信息 -->
        <div class="dialog-info-customer-info">
          <div class="dialog-info-customer-info-title">合同信息</div>
          <!-- 查询表单 -->
          <div class="dialog-info-order-left-form">
            <el-form
              ref="contractFromRef"
              size="mini"
              :inline="true"
              label-position="right"
              :model="contract.from.data"
            >
              <!-- <el-row> -->
                <!-- <el-col :span="5"> -->
                  <el-form-item label="结算对象:" size="mini">
                    <el-select
                      style="width:180px;"
                      filterable
                      clearable
                      placeholder="请选择"
                      v-model="contract.from.data.customer"
                    >
                      <el-option
                        v-for="item in payCustomerDropdowm"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                <!-- </el-col> -->
                <!-- <el-col :span="10"> -->
                  <el-form-item label="合同签订时间:" size="mini"  prop="startTime">
                    <el-date-picker
                      type="datetime"
                      placeholder="选择起始时间"
                      v-model="contract.from.data.startTime"
                     style="width:180px;"
                    ></el-date-picker>———
                    <el-date-picker
                      type="datetime"
                      placeholder="选择终止时间"
                      v-model="contract.from.data.endTime"
                     style="width:180px;"
                    ></el-date-picker>
                  </el-form-item>
                <!-- </el-col> -->
                <!-- <el-col :span="5"> -->
                  <el-form-item>
                    <el-button
                      type="primary"
                      plain
                      size="mini"
                      style="margin-left:20px;"
                      @click="searchContract"
                    >查询</el-button>
                  </el-form-item>
                <!-- </el-col> -->
              <!-- </el-row> -->
            </el-form>
          </div>
          <!-- 合同列表 -->
          <div class="dialog-info-order-right-table">
            <div>
              <el-table
                :data="contract.table.data"
                @row-click="contractTableRowClick"
                border
                highlight-current-row
                height="200"
              >
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  type="index"
                  label="序号"
                  width="50"
                ></el-table-column>
                <el-table-column show-overflow-tooltip align="center" label="合同编号" prop="no"></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  prop="name"
                  label="合同名称"
                  width="150"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  prop="shipper"
                  label="托运人"
                  width="200"
                ></el-table-column>
                <el-table-column prop="goodName" show-overflow-tooltip align="center" label="货物"></el-table-column>
                <el-table-column prop="price" show-overflow-tooltip align="center" label="运输单价"></el-table-column>
                <el-table-column prop="total" show-overflow-tooltip align="center" label="运费合计"></el-table-column>
                <!-- <el-table-column
                  prop="settlement"
                  show-overflow-tooltip
                  align="center"
                  label="已结算费用"
                ></el-table-column>-->
              </el-table>
              <el-pagination
                small
                background
                @size-change="contractSizeChange"
                @current-change="contractIndexChange"
                :current-page="contract.table.pageInfo.index"
                :page-sizes="[10, 20, 30]"
                :page-size="contract.table.pageInfo.size"
                layout="sizes, prev, pager, next, jumper, total"
                :total="contract.table.pageInfo.total"
                style="margin-top:10px;margin-bottom:10px;"
              ></el-pagination>
            </div>
          </div>
        </div>
        <!-- 运单信息 -->
        <div class="dialog-view-way-table">
          <div class="dialog-view-way-table-title">运单信息</div>
          <el-table
            ref="wayTableRef"
            :data="way.table.data"
            border
            @selection-change="wayTableSelectChange"
            :height="way.table.height"
          >
            <el-table-column
              align="center"
              show-overflow-tooltip
              type="index"
              label="序号"
              width="55"
            ></el-table-column>
            <el-table-column show-overflow-tooltip align="center" type="selection"></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="运单编号"
              prop="wayNo"
              width="200"
            ></el-table-column>
            <el-table-column show-overflow-tooltip align="center" label="货物" prop="goodsName"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" label="运送车辆" prop="truckNo"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" label="司机姓名" prop="driverName"></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="箱号"
              prop="ctrNo"
              v-if="info.tagName != undefined && info.tagName == 'sea'"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="铅封号"
              prop="sealNo"
              v-if="info.tagName != undefined && info.tagName == 'sea'"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="发货时间"
              prop="startGoodsTime"
              width="200"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="收货时间"
              prop="endGoodsTime"
              width="200"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="发货地址"
              prop="startGoodsPlace"
              width="250"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="收货地址"
              prop="endGoodsPlace"
              width="250"
            ></el-table-column>
            <el-table-column show-overflow-tooltip align="center" label="费用信息">
              <el-table-column show-overflow-tooltip align="center" label="运输单价(元/吨)" width="150" prop="price"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" label="货物重量" prop="weight"></el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                label="总费用"
                prop="total"
                width="150"
              ></el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <!-- 结算单信息 -->
        <div class="dialog-info-bottom">
          <div class="dialog-info-bottom-tittle">结算单信息</div>
          <!-- <el-table
            :data="bill.table.data"
            border
            selection-change="billTableSelectChange"
            height="200"
          >
            <el-table-column
              show-overflow-tooltip
              align="center"
              type="index"
              label="序号"
              width="55"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="contractNo"
              label="合同编号"
              width="180"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="attNo"
              label="订单编号"
              width="180"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="wayNo"
              label="运单编号"
              width="180"
            ></el-table-column>
            <el-table-column prop="payName" show-overflow-tooltip align="center" label="结算对象"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="goodsName" label="货物"></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="startGoodsPlace"
              label="发货地址"
            ></el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="endGoodsPlace" label="收获地址"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="payTypeName" label="结算方式"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="payMethodName" label="结算类型"></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="transportQuantity"
              label="费用信息"
            >
              <el-table-column show-overflow-tooltip align="center" prop="price" label="每/吨(价格)"></el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="totalWeight"
                label="总重(吨)"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="totalPrice"
                label="总费用"
                width="150"
              ></el-table-column>
            </el-table-column>
          </el-table>-->
          <div class="dialog-info-bottom-from">
            <el-form
              ref="billFromRef"
              :model="bill.from.data"
              :rules="bill.from.rules"
              size="mini"
              label-position="right"
              label-width="120px"
              class="info-formm"
            >
              <el-row>
                <el-col :span="8">
                  <el-form-item label="结算单名称：" size="mini" prop="name">
                    <el-input
                      v-model="bill.from.data.name"
                      size="mini"
                      placeholder="格式如：某某客户2020年2月份营收结算单"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="结算单号：" size="mini" prop="billNo">
                    <el-input disabled v-model="bill.from.data.billNo" size="mini"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="总金额：" size="mini" prop="allPrice">
                    <el-input v-model="bill.from.data.allPrice" size="mini"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item size="mini">
                    <el-button @click="amountStatistics" type="primary" size="mini" plain>金额统计</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="备注" size="mini" prop="remark">
                    <el-input v-model="bill.from.data.remark" type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="info.show = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryFeeContract,
  queryFeeWayByCon,
  addChargeBill,
  queryBillItem,
  updateBill,
  genBillNo,
  queryCollDiaCustomer
} from '@/request/api'
import { accAdd } from '@/utils/utils'
import store from '@/store'
export default {
  data() {
    return {
      payCustomerDropdowm: [], // 结算对象下拉
      payCustomerDropdowmParam: {
        checked: 1,
        cbId: ''
      },
      // 结算单临时数据
      billTableInterim: [],
      // 合同
      contract: {
        // 查询表单
        from: {
          data: {
            customer: '', // 结算对象
            startTime: '', // 开始时间
            endTime: '', // 结束时间
            cbId: ''
          }
        },
        // 合同表格
        table: {
          data: [],
          currentData: {},
          pageInfo: {
            index: 1,
            size: 10,
            total: 0
          }
        }
      },
      // 运单
      way: {
        table: {
          height: 200,
          data: [],
          selectList: [],
          selectTrigger: true
        }
      },
      // 结算单
      bill: {
        from: {
          data: {
            name: '', // 结算单名称
            allPrice: 0, // 总金额
            billNo: '',
            remark: '' // 备注
          },
          rules: {
            name: [
              {
                required: true,
                message: '请输入结算单名称',
                trigger: 'blur'
              }
            ],
            billNo: [
              {
                required: true,
                message: '请输入结算单号',
                trigger: 'blur'
              }
            ],
            allPrice: [
              {
                required: true,
                message: '请输入金额',
                trigger: 'blur'
              },
              {
                type: 'number',
                message: '请输入金额',
                trigger: 'blur'
              }
            ]
          }
        },
        table: {
          data: [],
          selectList: []
        }
      }
    }
  },
  props: {
    info: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 初始化合同列表
    initContract() {
      let cmtPartyB = ''
      let cmtPartyA = ''
      if (localStorage.getItem('IS_SHOW1') == 5) {
        // 平台
        cmtPartyA = store.state.user.FLT_UUID_DX_H
        cmtPartyB = this.contract.from.data.customer
      } else if (localStorage.getItem('IS_SHOW1') == 4) {
        // 供应商
        cmtPartyA = this.contract.from.data.customer
        cmtPartyB = store.state.user.FLT_UUID_DX_H
      }
      queryFeeContract(
        Object.assign(this.contract.from.data, {
          index: this.contract.table.pageInfo.index,
          size: this.contract.table.pageInfo.size,
          cbBillType: 'SHIP',
          cmtPartyB,
          cmtPartyA,
          cbType: this.info.tagName
        })
      ).then(res => {
        this.contract.table.data = res.data
        this.contract.table.pageInfo.total = res.total
      })
    },
    // 初始化运单列表
    initWayBill() {
      queryFeeWayByCon({
        no: this.contract.table.currentData.no
      }).then(res => {
        this.way.table.data = res.data
        this.way.table.height =
          res.data.length * 40 > 240 ? 240 : res.data.length * 40 + 140
      })
    },
    // 查询客户下拉列表
    initPayCustomerDropdowm() {
      queryCollDiaCustomer(this.payCustomerDropdowmParam).then(res => {
        this.payCustomerDropdowm = res.data
      })
    },
    // 查询合同列表
    searchContract() {
      this.way.table.data = []
      this.bill.table.data = []
      this.initContract()
    },
    dialogClose() {
      this.way.table.height = 200
      this.contract.from.data = {
        customer: '', // 结算对象
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        cbId: ''
      }
      this.contract.table.data = []
      this.bill.table.data = []
      this.way.table.data = []
      this.$refs.billFromRef.resetFields()
      this.$refs.contractFromRef.resetFields()
      this.$emit('dialogClose')
    },
    // 运单表选择
    wayTableSelectChange(val) {
      this.way.table.selectList = val
      this.bill.table.data = []
      this.bill.from.data.allPrice = 0
      if (this.way.table.selectList.length != 0) {
        this.way.table.selectList.forEach(w => {
          this.bill.table.data.push({
            contractNo: this.contract.table.currentData.no,
            attNo: w.attNo,
            wayNo: w.wayNo,
            customerName: this.contract.table.currentData.payName,
            goodsName: this.contract.table.currentData.goodName,
            startGoodsPlace: w.startGoodsPlace,
            endGoodsPlace: w.endGoodsPlace,
            payType: w.payType,
            payTypeName: w.payTypeName,
            payMethod: w.payMethod,
            payMethodName: w.payMethodName,
            price: w.price,
            totalWeight: w.weight,
            totalPrice: w.total,
            attId: w.attId,
            wayId: w.wayId,
            cmtId: w.cmtId,
            payName: this.contract.table.currentData.shipper,
            payId: this.contract.table.currentData.payId
          })
          this.bill.from.data.allPrice = accAdd(
            this.bill.from.data.allPrice,
            parseFloat(w.total) ? parseFloat(w.total) : 0
          )
        })
      }
    },
    contractSizeChange(val) {
      this.contract.table.pageInfo.size = val
      this.initContract()
    },
    contractIndexChange(val) {
      this.contract.table.pageInfo.index = val
      this.initContract()
    },
    billTableSelectChange(val) {
      this.bill.table.selectList = val
    },
    // dialog显示回调
    dialogShow() {
      if (this.info.title == '编辑') {
        this.contract.from.data.cbId = this.info.currentData.id
        queryBillItem({
          billId: this.info.currentData.id
        }).then(res => {
          if (res.data && res.data.length != 0) {
            this.billTableInterim = res.data
          }
        })
        this.payCustomerDropdowmParam.cbId = this.info.currentData.id
        Object.assign(this.bill.from.data, this.info.currentData)
        this.bill.from.data.billNo = this.info.currentData.no
        this.bill.from.data.billNo = this.info.currentData.code
        this.bill.from.data.allPrice = this.info.currentData.totalPrice
        this.initPayCustomerDropdowm()
        queryFeeContract(
          Object.assign(this.contract.from.data, {
            index: this.contract.table.pageInfo.index,
            size: this.contract.table.pageInfo.size
          })
        ).then(res => {
          this.contract.table.data = res.data
          this.contract.table.pageInfo.total = res.total
          this.contract.table.currentData = res.data[0]
          queryFeeWayByCon({
            checked: 1,
            no: this.contract.table.currentData.no
          }).then(res => {
            this.way.table.data = res.data
            if (res.data.length != 0) {
              this.bill.table.data = []
              this.way.table.selectTrigger = false
              let t = this
              setTimeout(() => {
                res.data.forEach(w => {
                  if (w.checked && w.checked == 'Y') {
                    t.$refs['wayTableRef'].toggleRowSelection(w, true)
                  }
                })
              }, 200)
            }
          })
        })
        return
      }
      this.initContract()
      this.initPayCustomerDropdowm()
    },
    // 合同列表点击
    contractTableRowClick(val) {
      this.contract.table.currentData = val
      if (this.info.title == '编辑') {
        queryFeeWayByCon({
          checked: 1,
          no: this.contract.table.currentData.no
        }).then(res => {
          this.way.table.data = res.data
          let t = this
          setTimeout(() => {
            res.data.forEach(w => {
              if (w.checked && w.checked == 'Y') {
                t.$refs['wayTableRef'].toggleRowSelection(w, true)
              }
            })
          })
        })
        return
      }
      genBillNo({
        cbBillCmtId: this.contract.table.currentData.id
      }).then(res => {
        this.bill.from.data.billNo = res.msg
      })
      this.initWayBill()
    },
    // 金额统计
    amountStatistics() {
      this.bill.from.data.allPrice = 0
      if (this.bill.table.data.length != 0) {
        this.bill.table.data.forEach(b => {
          this.bill.from.data.allPrice = accAdd(
            this.bill.from.data.allPrice,
            parseFloat(b.totalPrice) ? parseFloat(b.totalPrice) : 0
          )
        })
      }
    },
    // 保存结算单
    save() {
      if (this.bill.table.data.length == 0) {
        this.$message.error('请至少选择一项')
        return
      }
      this.$refs['billFromRef'].validate(v => {
        if (v) {
          const l = []
          if (this.info.title == '编辑' && this.billTableInterim.length != 0) {
            this.bill.table.data.forEach(b => {
              this.billTableInterim.forEach(bb => {
                if (b.wayId == bb.cbiWayId) {
                  l.push({
                    cbiId: bb.cbiId,
                    cbiCbId: b.cbiCbId,
                    cbiAttId: b.attId,
                    cbiType: b.payType,
                    cbiPrice: b.totalPrice,
                    cbiPayMethod: b.payMethod,
                    cbiPayType: b.payType,
                    cbiIsDel: 0,
                    cbiCmtId: b.cmtId,
                    cbiWayId: b.wayId
                  })
                } else {
                  l.push({
                    cbiId: b.cbiId,
                    cbiCbId: b.cbiCbId,
                    cbiAttId: b.attId,
                    cbiType: b.payType,
                    cbiPrice: b.totalPrice,
                    cbiPayMethod: b.payMethod,
                    cbiPayType: b.payType,
                    cbiIsDel: 0,
                    cbiCmtId: b.cmtId,
                    cbiWayId: b.wayId
                  })
                }
              })
            })
          } else {
            this.bill.table.data.forEach(b => {
              l.push({
                cbiId: b.cbiId,
                cbiCbId: b.cbiCbId,
                cbiAttId: b.attId,
                cbiType: b.payType,
                cbiPrice: b.totalPrice,
                cbiPayMethod: b.payMethod,
                cbiPayType: b.payType,
                cbiIsDel: 0,
                cbiCmtId: b.cmtId,
                cbiWayId: b.wayId
              })
            })
          }
          if (this.info.title == '编辑') {
            let weight = 0
            this.way.table.selectList.forEach(i => {
              weight = accAdd(weight, i.weight)
            })
            updateBill({
              cbId: this.info.currentData.id,
              cbNo: this.contract.table.currentData.no,
              cbBillCmtId: this.contract.table.currentData.id,
              cbBillName: this.bill.from.data.name,
              cbBillNo: this.bill.from.data.billNo,
              cbBillStatus: '1',
              cbPrice: this.contract.table.currentData.price,
              cbRemark: this.bill.from.data.remark,
              cbBillTotal: this.bill.from.data.allPrice,
              cbIsDel: 0,
              cbBillType: 'SHIP',
              cbJpayer: this.contract.table.currentData.payId,
              itemDTOList: l,
              cbWeight: weight,
              cbSettlemode: this.contract.table.currentData.payMethod,
              cbType: this.info.tagName
            }).then(() => {
              this.$message.success('修改成功')
              this.info.show = false
            })
            return
          }
          let weight = 0
          this.way.table.selectList.forEach(i => {
            weight = accAdd(weight, i.weight)
          })
          addChargeBill({
            cbNo: this.contract.table.currentData.no,
            cbBillCmtId: this.contract.table.currentData.id,
            cbBillName: this.bill.from.data.name,
            cbBillNo: this.bill.from.data.billNo,
            cbBillStatus: '1',
            cbPrice: this.contract.table.currentData.price,
            cbRemark: this.bill.from.data.remark,
            cbBillTotal: this.bill.from.data.allPrice,
            cbIsDel: 0,
            cbBillType: 'SHIP',
            cbFltId: store.state.user.FLT_UUID_DX_H,
            cbJpayer: this.contract.table.currentData.payId,
            itemDTOList: l,
            cbWeight: weight,
            cbSettlemode: this.contract.table.currentData.payMethod,
            cbType: this.info.tagName
          }).then(() => {
            this.$message.success('添加成功')
            this.info.show = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
.dialog-info-customer-info {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  .dialog-info-customer-info-title {
    position: absolute;
    top: -15px;
    background-color: white;
  }
}

.dialog-view-way-table {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  margin-top: 20px;
  .dialog-view-way-table-title {
    position: absolute;
    top: -15px;
    background-color: white;
  }
}

.dialog-info-bottom {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  margin-top: 20px;
  .dialog-info-bottom-tittle {
    position: absolute;
    top: -15px;
    background-color: white;
  }
  .dialog-info-bottom-from {
    margin-top: 15px;
  }
  .dialog-info-bottom-table-btn {
    margin-top: 5px;
    margin-bottom: 10px;
  }
}
</style>